<template>
  <view class="station-detail-page">
    <!-- 顶部图片轮播 -->
    <view class="station-images">
      <u-swiper
        :list="station.images"
        height="360"
        radius="0"
        indicator
        circular
        indicatorActiveColor="#fff"
        indicatorColor="rgba(255,255,255,0.5)"
        @change="handleSwipeChange"
      ></u-swiper>
    
      
      <!-- 顶部操作按钮 -->
      <view class="top-actions">
        <button class="favorite-btn" @click="toggleFavorite">
          <u-icon 
            :name="station.favorite ? 'heart-fill' : 'heart'" 
            size="26" 
            :color="station.favorite ? '#ff4d4f' : '#fff'"
          ></u-icon>
          <text>{{ station.favorite ? '已收藏' : '收藏' }}</text>
        </button>
        <button class="share-btn" @click="shareStation">
          <u-icon name="share" size="26" color="#fff"></u-icon>
          <text>分享</text>
        </button>
      </view>
    </view>
    
    <!-- 标题和评分信息 -->
    <view class="station-header">
      <view class="header-left">
        <view class="station-name">{{ station.name }}</view>
        <view class="station-rating">
          <u-icon name="star" size="26" color="#ffc107"></u-icon>
          <text class="rating-value">{{ station.rating }}</text>
          <text class="rating-count">({{ station.reviewCount }}条评价)</text>
          <view class="tags-container">
            <view class="tag" v-for="(tag, index) in station.tags" :key="index">
              {{ tag }}
            </view>
          </view>
        </view>
      </view>
      <view class="header-right">
        <button class="contact-btn" @click="contactStation">
          <u-icon name="phone" size="24" color="#fff"></u-icon>
          <text>电话咨询</text>
        </button>
      </view>
    </view>
    
    <!-- 基本信息 -->
    <view class="station-info-card">
      <view class="info-item">
        <u-icon name="map" size="26" color="#4facfe"></u-icon>
        <text class="info-label">地址：</text>
        <text class="info-value">{{ station.address }}</text>
       
      </view>
      <view class="info-item">
        <u-icon name="clock" size="26" color="#4facfe"></u-icon>
        <text class="info-label">营业时间：</text>
        <text class="info-value">{{ station.businessHours }}</text>
      </view>
      <view class="info-item">
        <u-icon name="info-circle" size="26" color="#4facfe"></u-icon>
        <text class="info-label">距离：</text>
        <text class="info-value">{{ station.distance }}km</text>
      </view>
      <view class="info-item">
        <u-icon name="info-circle" size="26" color="#4facfe"></u-icon>
        <text class="info-label">已培训学员：</text>
        <text class="info-value">{{ station.studentCount }}人</text>
      </view>
      <view class="info-item">
        <u-icon name="info-circle" size="26" color="#4facfe"></u-icon>
        <text class="info-label">资质认证：</text>
        <text class="info-value">{{ station.certification }}</text>
      </view>
    </view>
    
    <!-- 内容标签页 -->
    <u-tabs 
      :list="tabs" 
      v-model="activeTab" 
	
      :is-scroll="false"
      :bar-width="100"
      bar-height="6"
      active-color="#4facfe"
      inactive-color="#666"
      font-size="30"
      @change="handleTabChange"
    ></u-tabs>
    
    <!-- 机构介绍 -->
    <view class="tab-content" v-if="activeTab === 0">
      <view class="introduction">
        <view class="section-title">机构介绍</view>
        <view class="content">
          <text>{{ station.introduction }}</text>
        </view>
      </view>
      
      <view class="facility-showcase">
        <view class="section-title">场地设施</view>
        <view class="facility-grid">
          <view class="facility-item" v-for="(facility, index) in station.facilities" :key="index">
            <view class="facility-icon" :style="{backgroundColor: facility.color}">
              <u-icon name="info-circle" size="30" color="#fff"></u-icon>
            </view>
            <text class="facility-name">{{ facility.name }}</text>
          </view>
        </view>
      </view>
      
      <view class="feature-highlights">
        <view class="section-title">特色优势</view>
        <view class="highlight-list">
          <view class="highlight-item" v-for="(highlight, index) in station.highlights" :key="index">
            <u-icon name="info-circle" size="26" color="#4facfe" class="highlight-icon"></u-icon>
            <text class="highlight-text">{{ highlight }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 课程列表 -->
    <view class="tab-content" v-if="activeTab === 1">
      <view class="course-filters">
        <!-- <u-segmented-control 
          :current="activeCourseType" 
          :values="courseTypeFilters"
          @change="handleCourseTypeChange"
          active-color="#4facfe"
          inactive-color="#666"
          bg-color="#f5f7fa"
          :border-radius="30"
          :height="60"
          :font-size="26"
        ></u-segmented-control> -->
      </view>
      
      <view class="course-list">
        <view 
          class="course-item" 
          v-for="(course, index) in filteredCourses" 
          :key="index"
          @click="navigateTo(`/pages/course/detail?id=${course.id}`)"
        >
          <view class="course-image">
            <image :src="course.image" mode="aspectFill"></image>
            <view class="course-tag" v-if="course.tag">
              {{ course.tag }}
            </view>
          </view>
          
          <view class="course-info">
            <view class="course-title">{{ course.name }}</view>
            <view class="course-desc">{{ course.desc }}</view>
            <view class="course-meta">
              <view class="meta-item">
                <u-icon name="clock" size="20" color="#999"></u-icon>
                <text>{{ course.duration }}</text>
              </view>
              <view class="meta-item">
                <text>{{ course.studentCount }}人已学</text>
              </view>
              <view class="meta-item">
                <u-icon name="star" size="20" color="#ffc107"></u-icon>
                <text>{{ course.rating }}</text>
              </view>
            </view>
          </view>
          
          <view class="course-price">
            <view class="price-current">¥{{ course.price }}</view>
            <view class="price-original" v-if="course.originalPrice">¥{{ course.originalPrice }}</view>
            <button class="book-btn" @click.stop="bookCourse(course)">
              立即预约
            </button>
          </view>
        </view>
      </view>
      
      <view class="no-courses" v-if="filteredCourses.length === 0">
        <u-icon name="book-open" size="80" color="#ddd"></u-icon>
        <text class="no-courses-text">暂无相关课程</text>
      </view>
    </view>
    
    <!-- 学员评价 -->
    <view class="tab-content" v-if="activeTab === 2">
      <view class="rating-summary">
        <view class="overall-rating">
          <text class="rating">{{ station.rating }}</text>
          <text class="out-of">/5.0</text>
        </view>
        <view class="rating-distribution">
          <view class="rating-bar" v-for="(item, index) in ratingDistribution" :key="index">
            <text class="rating-level">{{ item.level }}分</text>
            <view class="progress-container">
              <view class="progress-bar" :style="{width: item.percentage + '%'}"></view>
            </view>
            <text class="rating-percentage">{{ item.percentage }}%</text>
          </view>
        </view>
      </view>
      
      <view class="review-filters">
        <u-dropdown 
          :title="selectedReviewFilter" 
          :options="reviewFilterOptions"
          @change="handleReviewFilterChange"
          placement="top"
          active-color="#4facfe"
        ></u-dropdown>
      </view>
      
      <view class="review-list">
        <view 
          class="review-item" 
          v-for="(review, index) in filteredReviews" 
          :key="index"
        >
          <view class="review-header">
            <image :src="review.userAvatar" mode="aspectFill" class="user-avatar"></image>
            <view class="user-info">
              <text class="user-name">{{ review.userName }}</text>
              <text class="review-time">{{ review.time }}</text>
            </view>
            <view class="review-rating">
              <u-icon 
                name="star" 
                size="24" 
                color="#ffc107" 
                v-for="(star, sIndex) in 5" 
                :key="sIndex"
                :class="{empty: sIndex >= review.rating}"
              ></u-icon>
            </view>
          </view>
          
          <view class="review-course">
            <text>学习课程：{{ review.courseName }}</text>
          </view>
          
          <view class="review-content">
            {{ review.content }}
          </view>
          
          <view class="review-images" v-if="review.images && review.images.length">
            <image 
              :src="img" 
              mode="aspectFill" 
              v-for="(img, i) in review.images" 
              :key="i"
              @click="previewImage(review.images, i)"
            ></image>
          </view>
          
          <view class="review-footer">
            <view class="review-like" @click="likeReview(review)">
              <u-icon 
                :name="review.liked ? 'thumb-up-fill' : 'thumb-up'" 
                size="24" 
                :color="review.liked ? '#4facfe' : '#999'"
              ></u-icon>
              <text>{{ review.likeCount }}</text>
            </view>
            <button class="reply-btn" @click.stop="replyReview(review)">
              回复
            </button>
          </view>
        </view>
      </view>
      
      <view class="no-reviews" v-if="filteredReviews.length === 0">
        <u-icon name="chat" size="80" color="#ddd"></u-icon>
        <text class="no-reviews-text">暂无学员评价</text>
      </view>
      
      <view class="load-more-reviews" v-if="hasMoreReviews && filteredReviews.length > 0">
        <button class="load-more-btn" @click="loadMoreReviews">
          加载更多评价
        </button>
      </view>
    </view>
    
    <!-- 底部预约咨询栏 -->
    <view class="booking-bar">
      <view class="booking-info">
        <view class="min-price">最低¥{{ station.minPrice }}起</view>
        <view class="discount" v-if="station.discount">限时优惠</view>
      </view>
      <view class="booking-actions">
     
        <button class="book-now" @click="showBookingDialog = true">
          立即预约
        </button>
      </view>
    </view>
    
    <!-- 预约弹窗 -->
    <u-popup 
      :show="showBookingDialog" 
      mode="center" 
	  round="20"
      closeable
      @close="showBookingDialog = false"
    >
      <view class="booking-popup" style="width: 600rpx;">
        <view class="popup-title">预约咨询</view>
        
        <view class="form-group">
          <text class="form-label">选择课程</text>
          <picker 
            v-model="selectedCourseId" 
            :options="courseOptions"
            placeholder="请选择要咨询的课程"
            @change="handleCourseSelect"
          ></picker>
        </view>
        
        <view class="form-group">
          <text class="form-label">您的姓名</text>
		  
          <u--input 
            v-model="bookingName" 
            placeholder="请输入您的姓名"
            type="text"
          ></u--input>
        </view>
        
        <view class="form-group">
          <text class="form-label">联系电话</text>
          <u--input 
            v-model="bookingPhone" 
            placeholder="请输入您的手机号码"
            type="number"
            maxlength="11"
          ></u--input>
        </view>
        
        <view class="form-group">
          <text class="form-label">预约时间</text>
          <u-datetime-picker 
            v-model="selectedDate"
            mode="date"
            title="选择日期"
            :start-date="startDate"
            :end-date="endDate"
          ></u-datetime-picker>
        </view>
        
        <view class="form-group">
          <text class="form-label">留言</text>
          <u-input 
            v-model="bookingMessage" 
            placeholder="有什么想了解的？"
            type="textarea"
            rows="3"
          ></u-input>
        </view>
        
        <button class="submit-booking" @click="submitBooking">
          提交预约
        </button>
      </view>
    </u-popup>
    
    <!-- 回到顶部按钮 -->
    <u-back-top 
      :scroll-top="scrollTop" 
      :show="scrollTop > 800"
      :bottom="150"
      :right="30"
      :icon-style="{color: '#4facfe', }"
    ></u-back-top>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面滚动位置
      scrollTop: 0,
      
      // 轮播图当前索引
      currentImageIndex: 0,
      
      // 标签页相关
      tabs: [
        { name: '机构介绍' },
        { name: '课程列表' },
        { name: '学员评价' }
      ],
      activeTab: 0,
      
      // 课程筛选
      courseTypeFilters: ['全部课程', '考证培训', '技能提升', '企业定制'],
      activeCourseType: 0,
      
      // 评价筛选
      reviewFilterOptions: [
        { label: '全部评价', value: 'all' },
        { label: '好评 (4分以上)', value: 'good' },
        { label: '中评 (3-4分)', value: 'medium' },
        { label: '差评 (3分以下)', value: 'bad' },
        { label: '有图评价', value: 'withImage' }
      ],
      selectedReviewFilter: '全部评价',
      hasMoreReviews: true,
      reviewPage: 1,
      
      // 预约表单
      showBookingDialog: false,
      selectedCourseId: '',
      bookingName: '',
      bookingPhone: '',
      selectedDate: '',
      bookingMessage: '',
      startDate: '',
      endDate: '',
      
      // 驿站数据
      station: {},
      courseOptions: []
    };
  },
  
  onLoad(options) {
    // 获取当前日期
    const today = new Date();
    this.startDate = this.formatDate(today);
    uni.setNavigationBarTitle({
    	title:options.title
    })
    // 设置结束日期为30天后
    const endDate = new Date();
    endDate.setDate(today.getDate() + 30);
    this.endDate = this.formatDate(endDate);
    
    // 默认选中今天
    this.selectedDate = this.startDate;
    
    // 模拟获取驿站详情数据
    this.getStationDetail(options.id);
  },
  
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  
  computed: {
    // 筛选课程
    filteredCourses() {
      if (this.activeCourseType === 0) {
        return this.station.courses || [];
      }
      
      const typeMap = ['', 'certification', 'skill', 'enterprise'];
      const currentType = typeMap[this.activeCourseType];
      
      return (this.station.courses || []).filter(course => course.type === currentType);
    },
    
    // 筛选评价
    filteredReviews() {
      let result = [...(this.station.reviews || [])];
      
      switch (this.selectedReviewFilter) {
        case '好评 (4分以上)':
          result = result.filter(review => review.rating >= 4);
          break;
        case '中评 (3-4分)':
          result = result.filter(review => review.rating >= 3 && review.rating < 4);
          break;
        case '差评 (3分以下)':
          result = result.filter(review => review.rating < 3);
          break;
        case '有图评价':
          result = result.filter(review => review.images && review.images.length > 0);
          break;
      }
      
      // 模拟分页
      return result.slice(0, this.reviewPage * 5);
    },
    
    // 评分分布
    ratingDistribution() {
      // 实际应用中应该从接口获取，这里模拟数据
      return [
        { level: 5, percentage: Math.floor(Math.random() * 30) + 60 },
        { level: 4, percentage: Math.floor(Math.random() * 30) + 30 },
        { level: 3, percentage: Math.floor(Math.random() * 20) + 10 },
        { level: 2, percentage: Math.floor(Math.random() * 10) + 1 },
        { level: 1, percentage: Math.floor(Math.random() * 5) }
      ];
    }
  },
  
  methods: {
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 获取驿站详情
    getStationDetail(id) {
      // 模拟API请求
      uni.showLoading({ title: '加载中...' });
      
      setTimeout(() => {
        // 生成模拟数据
        this.station = this.generateMockStation(id);
        
        // 初始化课程选项
        this.courseOptions = this.station.courses.map(course => ({
          label: course.name,
          value: course.id
        }));
        
        // 默认选中第一个课程
        if (this.courseOptions.length > 0) {
          this.selectedCourseId = this.courseOptions[0].value;
        }
        
        uni.hideLoading();
      }, 800);
    },
    
    // 生成模拟驿站数据
    generateMockStation(id) {
      // 课程类型
      const courseTypes = [
        { name: 'AOPA驾驶员执照培训', type: 'certification' },
        { name: 'UTC航拍技术认证', type: 'certification' },
        { name: '高级航拍技巧提升', type: 'skill' },
        { name: '农业植保无人机操作', type: 'skill' },
        { name: '电力巡检无人机应用', type: 'skill' },
        { name: '企业定制化培训', type: 'enterprise' }
      ];
      
      // 生成课程
      const courses = [];
      for (let i = 0; i < 6; i++) {
        const course = courseTypes[i];
        const price = Math.floor(Math.random() * 4000) + 2000;
        const discount = Math.random() > 0.5;
        
        courses.push({
          id: i + 1,
          name: course.name,
          type: course.type,
          image: `https://picsum.photos/id/${200 + i}/300/200`,
          desc: `${course.name}，专业教练团队，理论+实操结合，包教包会，考试通过率95%以上`,
          price: discount ? Math.floor(price * 0.8) : price,
          originalPrice: discount ? price : '',
          duration: `${Math.floor(Math.random() * 3) + 3}天`,
          studentCount: Math.floor(Math.random() * 900) + 100,
          rating: (4 + Math.random()).toFixed(1),
          tag: discount ? '限时优惠' : i === 0 ? '热门推荐' : ''
        });
      }
      
      // 生成评价
      const reviews = [];
      const reviewContents = [
        "学校环境很好，教练很专业，讲解非常细致，学到了很多实用技能。",
        "课程安排合理，理论和实操结合得很好，考试一次性通过，非常满意！",
        "设备很新，场地也很大，教练很有耐心，值得推荐给想学习无人机的朋友。",
        "总体不错，但感觉实操时间可以再多一些，希望能改进。",
        "价格有点高，但教学质量确实不错，物有所值吧。",
        "报名后服务有点跟不上，预约实操时间不太方便，希望能改善服务。"
      ];
      
      for (let i = 0; i < 12; i++) {
        const rating = Math.floor(Math.random() * 5) + 1;
        const hasImage = Math.random() > 0.6;
        const images = hasImage ? [
          `https://picsum.photos/id/${250 + i}/300/300`,
          ...(Math.random() > 0.5 ? [`https://picsum.photos/id/${260 + i}/300/300`] : [])
        ] : [];
        
        reviews.push({
          id: i + 1,
          userName: `学员${i + 1}`,
          userAvatar: `https://picsum.photos/id/${180 + i}/100/100`,
          rating: rating,
          courseName: courses[Math.floor(Math.random() * courses.length)].name,
          content: reviewContents[Math.floor(Math.random() * reviewContents.length)],
          images: images,
          time: `${Math.floor(Math.random() * 30) + 1}天前`,
          likeCount: Math.floor(Math.random() * 50),
          liked: false
        });
      }
      
      // 计算平均评分
      const avgRating = (reviews.reduce((sum, review) => sum + review.rating, 0) / reviews.length).toFixed(1);
      
      // 场地设施
      const facilities = [
        { name: '理论教室', icon: 'book', color: '#4facfe' },
        { name: '模拟飞行区', icon: 'game', color: '#fa709a' },
        { name: '实操场地', icon: 'map', color: '#37c2fc' },
        { name: '设备仓库', icon: 'box', color: '#96e6a1' },
        { name: '考试中心', icon: 'certificate', color: '#ffc107' },
        { name: '休息区', icon: 'coffee', color: '#84fab0' }
      ];
      
      // 特色优势
      const highlights = [
        "国家认证的无人机培训机构",
        "拥有多年教学经验的专业教练团队",
        "理论+模拟+实操三维教学模式",
        "考试通过率95%以上",
        "提供就业推荐服务",
        "可免费重学直至通过考试"
      ];
      
      return {
        id: id,
        name: `蓝天无人机培训学校${id}`,
        images: [
          `https://picsum.photos/id/${120 + parseInt(id)}/400/300`,
          `https://picsum.photos/id/${120 + parseInt(id)}/400/300`,
          `https://picsum.photos/id/${120 + parseInt(id)}/400/300`,
          `https://picsum.photos/id/${175 + parseInt(id)}/400/300`
        ],
        rating: parseFloat(avgRating),
        reviewCount: reviews.length,
        tags: ['AOPA认证', 'UTC授权', '考试中心', '就业推荐'],
        address: `北京市海淀区中关村南大街${parseInt(id) * 10 + 5}号无人机产业园${id}号楼`,
        businessHours: '周一至周日 09:00-18:00',
        distance: (Math.random() * 15 + 0.5).toFixed(1),
        studentCount: Math.floor(Math.random() * 9000) + 1000,
        certification: 'AOPA认证培训机构、UTC授权考试中心、中国航空运输协会会员单位',
        phone: `13${Math.floor(Math.random() * 100000000)}`,
        introduction: `蓝天无人机培训学校${id}是经国家民航管理部门批准成立的专业无人机培训机构，拥有多年无人机教学经验。学校配备了专业的教学团队和先进的无人机设备，提供从入门到精通的全方位培训课程。我们注重理论与实践相结合，确保每位学员都能掌握扎实的无人机操作技能和相关知识，顺利通过各项考试并获得相应资质证书。`,
        facilities: facilities,
        highlights: highlights,
        courses: courses,
        reviews: reviews,
        minPrice: Math.min(...courses.map(c => c.price)),
        discount: Math.random() > 0.5,
        favorite: false,
        location: {
          latitude: 39.9 + Math.random() * 0.2,
          longitude: 116.3 + Math.random() * 0.2
        }
      };
    },
    
    // 轮播图切换
    handleSwipeChange(index) {
      this.currentImageIndex = index;
    },
    
    // 切换标签页
    handleTabChange(index) {
		console.log(index)
      this.activeTab = index.index;
      // 滚动到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
    },
    
    // 切换课程类型筛选
    handleCourseTypeChange(index) {
      this.activeCourseType = index;
    },
    
    // 切换评价筛选
    handleReviewFilterChange(option) {
      this.selectedReviewFilter = option.label;
      this.reviewPage = 1; // 重置分页
    },
    
    // 加载更多评价
    loadMoreReviews() {
      if (this.filteredReviews.length >= this.station.reviews.length) {
        this.hasMoreReviews = false;
        return;
      }
      
      this.reviewPage++;
    },
    
    // 切换收藏状态
    toggleFavorite() {
      this.station.favorite = !this.station.favorite;
      uni.showToast({
        title: this.station.favorite ? '收藏成功' : '取消收藏',
        icon: 'none',
        duration: 1500
      });
    },
    
    // 分享驿站
    shareStation() {
      uni.showActionSheet({
        itemList: ['分享给微信好友', '分享到朋友圈', '复制链接', '保存图片'],
        success: function(res) {
          console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
          // 实际应用中调用相应的分享API
          uni.showToast({
            title: '分享功能开发中',
            icon: 'none'
          });
        }
      });
    },
    
    // 联系驿站
    contactStation() {
      uni.makePhoneCall({
        phoneNumber: this.station.phone,
        fail: (err) => {
          console.log('拨打电话失败', err);
        }
      });
    },
    
    // 打开地图导航
    openLocation() {
      uni.openLocation({
        latitude: this.station.location.latitude,
        longitude: this.station.location.longitude,
        name: this.station.name,
        address: this.station.address,
        scale: 18
      });
    },
    
    // 预览图片
    previewImage(images, index) {
      uni.previewImage({
        urls: images,
        current: index
      });
    },
    
    // 点赞评价
    likeReview(review) {
      if (review.liked) {
        review.likeCount--;
      } else {
        review.likeCount++;
      }
      review.liked = !review.liked;
    },
    
    // 回复评价
    replyReview(review) {
      uni.showToast({
        title: `回复${review.userName}的评价`,
        icon: 'none'
      });
      // 实际应用中可以打开回复输入框
    },
    
    // 选择课程
    handleCourseSelect() {
      console.log('选中的课程ID:', this.selectedCourseId);
    },
    
    // 预约课程
    bookCourse(course) {
      this.selectedCourseId = course.id;
      this.showBookingDialog = true;
    },
    
    // 开始在线聊天
    startChat() {
      uni.navigateTo({
        url: `/pages/chat?stationId=${this.station.id}&name=${this.station.name}`
      });
    },
    
    // 提交预约
    submitBooking() {
      // 简单验证
      if (!this.bookingName) {
        uni.showToast({ title: '请输入您的姓名', icon: 'none' });
        return;
      }
      
      if (!this.bookingPhone || this.bookingPhone.length !== 11) {
        uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
        return;
      }
      
      if (!this.selectedCourseId) {
        uni.showToast({ title: '请选择要咨询的课程', icon: 'none' });
        return;
      }
      
      // 模拟提交
      uni.showLoading({ title: '提交中...' });
      
      setTimeout(() => {
        uni.hideLoading();
        this.showBookingDialog = false;
        
        uni.showToast({
          title: '预约成功，我们会尽快与您联系',
          icon: 'none',
          duration: 2000
        });
        
        // 重置表单
        this.bookingName = '';
        this.bookingPhone = '';
        this.bookingMessage = '';
      }, 1000);
    },
    
    // 导航到课程详情
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.station-detail-page {
  background-color: #f5f7fa;
  min-height: 100vh;
}

// 顶部图片轮播
.station-images {
  position: relative;
  height: 360rpx;
  
  .image-count {
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24rpx;
    padding: 5rpx 15rpx;
    border-radius: 20rpx;
    z-index: 10;
  }
  
  .top-actions {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    display: flex;
    gap: 15rpx;
    z-index: 10;
    
    .favorite-btn, .share-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      border: none;
      border-radius: 30rpx;
      padding: 8rpx 18rpx;
      font-size: 24rpx;
    }
  }
}

// 标题和评分信息
.station-header {
  display: flex;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  background-color: #fff;
  .header-left {
    flex: 1;
  }
  
  .station-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .station-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    
    .rating-value {
      font-size: 28rpx;
      color: #ff9800;
      font-weight: bold;
      margin: 0 8rpx 0 5rpx;
    }
    
    .rating-count {
      font-size: 24rpx;
      color: #999;
      margin-right: 15rpx;
    }
    
    .tags-container {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10rpx;
      
      .tag {
        background-color: #f5f7fa;
        color: #666;
        font-size: 22rpx;
        padding: 3rpx 12rpx;
        border-radius: 15rpx;
        margin-right: 10rpx;
        margin-bottom: 8rpx;
      }
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    
    .contact-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      background-color: #4facfe;
      color: #fff;
      border: none;
      border-radius: 30rpx;
      padding: 10rpx 20rpx;
      font-size: 26rpx;
    }
  }
}

// 基本信息卡片
.station-info-card {
  background-color: #fff;
  margin: 0 30rpx 20rpx;
  border-radius: 16rpx;
  margin-top: 115rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .info-item {
    display: flex;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1rpx solid #f5f7fa;
    
    &:last-child {
      border-bottom: none;
    }
    
    .u-icon {
      margin-right: 15rpx;
      flex-shrink: 0;
    }
    
    .info-label {
      font-size: 26rpx;
      color: #666;
      width: 180rpx;
      flex-shrink: 0;
    }
    
    .info-value {
      font-size: 26rpx;
      color: #333;
      flex: 1;
      line-height: 1.5;
    }
    
    .navigate-btn {
      display: flex;
      align-items: center;
      gap: 5rpx;
      background-color: #f0f7ff;
      color: #4facfe;
      border: none;
      border-radius: 20rpx;
      padding: 5rpx 15rpx;
      font-size: 24rpx;
      flex-shrink: 0;
    }
  }
}

// 标签页内容
.tab-content {
  padding: 20rpx 30rpx 30rpx;
  background-color: #fff;
  margin-bottom: 120rpx;
}

// 机构介绍
.introduction, .facility-showcase, .feature-highlights {
  margin-bottom: 30rpx;
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    padding-left: 10rpx;
    border-left: 6rpx solid #4facfe;
  }
  
  .content {
    font-size: 26rpx;
    color: #666;
    line-height: 1.8;
    text-align: justify;
  }
}

// 场地设施
.facility-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  .facility-item {
    width: 28%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 10rpx;
    background-color: #f5f7fa;
    border-radius: 12rpx;
    
    .facility-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15rpx;
    }
    
    .facility-name {
      font-size: 24rpx;
      color: #333;
      text-align: center;
    }
  }
}

// 特色优势
.highlight-list {
  .highlight-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15rpx;
    
    .highlight-icon {
      margin-right: 15rpx;
      margin-top: 5rpx;
      flex-shrink: 0;
    }
    
    .highlight-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

// 课程筛选
.course-filters {
  margin-bottom: 25rpx;
}

// 课程列表
.course-list {
  .course-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f7fa;
    
    &:last-child {
      border-bottom: none;
    }
    
    .course-image {
      width: 200rpx;
      height: 140rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;
      
      image {
        width: 100%;
        height: 100%;
      }
      
      .course-tag {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        background-color: #ff4d4f;
        color: #fff;
        font-size: 20rpx;
        padding: 3rpx 10rpx;
        border-radius: 4rpx;
      }
    }
    
    .course-info {
      flex: 1;
      padding: 0 20rpx;
      .course-title {
        font-size: 28rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .course-desc {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 15rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
      }
      
      .course-meta {
        display: flex;
        font-size: 22rpx;
        color: #999;
        
        .meta-item {
          display: flex;
          align-items: center;
          margin-right: 20rpx;
          
          .u-icon {
            margin-right: 5rpx;
          }
        }
      }
    }
    
    .course-price {
      width: 140rpx;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      
      .price-current {
        font-size: 28rpx;
        color: #ff4d4f;
        font-weight: bold;
      }
      
      .price-original {
        font-size: 22rpx;
        color: #999;
        text-decoration: line-through;
        margin-bottom: 15rpx;
      }
      
      .book-btn {
        background-color: #4facfe;
        color: #fff;
        border: none;
        border-radius: 20rpx;
        padding: 8rpx 20rpx;
        font-size: 24rpx;
      }
    }
  }
}

.no-courses {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .no-courses-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 30rpx;
  }
}

// 评价摘要
.rating-summary {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f7fa;
  margin-bottom: 30rpx;
  
  .overall-rating {
    width: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    .rating {
      font-size: 60rpx;
      font-weight: bold;
      color: #ff9800;
    }
    
    .out-of {
      font-size: 26rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
  
  .rating-distribution {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    .rating-bar {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      .rating-level {
        font-size: 24rpx;
        color: #666;
        width: 60rpx;
      }
      
      .progress-container {
        flex: 1;
        height: 12rpx;
        background-color: #f5f7fa;
        border-radius: 6rpx;
        margin: 0 15rpx;
        overflow: hidden;
        
        .progress-bar {
          height: 100%;
          background-color: #ffc107;
        }
      }
      
      .rating-percentage {
        font-size: 24rpx;
        color: #666;
        width: 60rpx;
        text-align: right;
      }
    }
  }
}

// 评价筛选
.review-filters {
  margin-bottom: 25rpx;
}

// 评价列表
.review-list {
  .review-item {
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f5f7fa;
    
    &:last-child {
      border-bottom: none;
    }
    
    .review-header {
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      
      .user-avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 15rpx;
      }
      
      .user-info {
        flex: 1;
        
        .user-name {
          font-size: 26rpx;
          font-weight: 500;
          color: #333;
          margin-bottom: 5rpx;
          display: block;
        }
        
        .review-time {
          font-size: 22rpx;
          color: #999;
        }
      }
      
      .review-rating {
        display: flex;
        .u-icon {
          &.empty {
            color: #eee;
          }
        }
      }
    }
    
    .review-course {
      font-size: 24rpx;
      color: #666;
      margin-bottom: 15rpx;
      padding-left: 75rpx;
    }
    
    .review-content {
      font-size: 26rpx;
      color: #333;
      line-height: 1.6;
      margin-bottom: 15rpx;
      padding-left: 75rpx;
    }
    
    .review-images {
      display: flex;
      gap: 15rpx;
      margin-bottom: 15rpx;
      padding-left: 75rpx;
      
      image {
        width: 150rpx;
        height: 150rpx;
        border-radius: 10rpx;
      }
    }
    
    .review-footer {
      display: flex;
      justify-content: space-between;
      padding-left: 75rpx;
      
      .review-like {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        
        .u-icon {
          margin-right: 5rpx;
        }
      }
      
      .reply-btn {
        background-color: transparent;
        color: #4facfe;
        border: none;
        font-size: 24rpx;
        padding: 0;
      }
    }
  }
}

.no-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .no-reviews-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 30rpx;
  }
}

.load-more-reviews {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
  
  .load-more-btn {
    background-color: #f5f7fa;
    color: #666;
    border: none;
    border-radius: 30rpx;
    padding: 12rpx 40rpx;
    font-size: 26rpx;
  }
}

// 底部预约栏
.booking-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 15rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 99;
  
  .booking-info {
    .min-price {
      font-size: 28rpx;
      color: #ff4d4f;
      font-weight: bold;
    }
    
    .discount {
      font-size: 24rpx;
      color: #ff4d4f;
      // background-color: #fff0f0;
      padding: 2rpx 10rpx;
      border-radius: 12rpx;
      margin-left: 15rpx;
    }
  }
  
  .booking-actions {
    display: flex;
    gap: 20rpx;
    
    .online-chat {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      background-color: #e6f7ff;
      color: #4facfe;
      border: 1rpx solid #4facfe;
      border-radius: 60rpx;
      padding: 10rpx 30rpx;
	  
      font-size: 28rpx;
      width: 250rpx;
    }
    
    .book-now {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #4facfe;
      color: #fff;
      border: none;
      border-radius: 60rpx;
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      width: 200rpx;
    }
  }
}

// 预约弹窗
.booking-popup {
  padding: 30rpx;
  
  .popup-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    text-align: center;
  }
  
  .form-group {
    margin-bottom: 25rpx;
    
    .form-label {
      display: block;
      font-size: 26rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
  }
  
  .submit-booking {
    width: 100%;
    background-color: #4facfe;
    color: #fff;
    border: none;
    border-radius: 50rpx;
    padding: 15rpx 0;
    font-size: 30rpx;
    margin-top: 20rpx;
	margin-bottom: 150rpx;
  }
}
</style>
